<template>
  <el-container class="container_box">
    <el-header>公共组件</el-header>
    <el-container>
      <el-aside :width="foldMenu ? '64px' : '200px'">
        <div class="foldBtn_box">
          <span class="iconfont icon-zhedie2" @click="fold"></span>
        </div>
        <!-- <el-menu
          @open="handleOpen"
          @close="handleClose"
          background-color="#373b41"
          text-color="#fff"
          :collapse="foldMenu"
          :collapse-transition="false"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">导航一</span>
            </template>
            <el-menu-item-group>
              <span slot="title">分组一</span>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <span slot="title">选项4</span>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>

          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu> -->

        <!-- <el-menu
          @open="handleOpen"
          @close="handleClose"
          background-color="#373b41"
          text-color="#fff"
          :collapse="foldMenu"
          :collapse-transition="false"
        >
          <el-submenu
            v-for="item in menuList.children"
            :index="item.path + ''"
            :key="item.path"
            >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.descript }}</span>
            </template>
            <el-menu-item
              v-for="items in item.children"
              :key="items.path"
              :index="'/' + items.path"
              @click="saveNavState('/' + items.path)"
            >
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ items.descript }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu> -->

        
        
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { createRoute } from "@/router/index";
export default {
  name: "",
  data() {
    return {
      foldMenu: false,
      menuList: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {

  },
  // 监控data中的数据变化
  watch: {},
  created() {
    this.theCreateRoute()
  },
  methods: {
    fold() {
      this.foldMenu = !this.foldMenu;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //封装router导航栏
    theCreateRoute() {
      let res = createRoute();
      let obj = res.find(o => o.path === '/home');
      this.menuList = obj
      console.log(this.menuList);
    },
    // toLink(link) {
    //   this.$router.replace({ path: link });
    // },
    saveNavState(row) {
      this.$router.push({ path: row });
    }
  },
};
</script>

<style lang="less" scoped>
//布局盒子
.container_box {
  height: 100%;
}
.el-header {
  background-color: #373b41;
}
.el-menu {
  border-right: none;
}

.el-aside {
  transition: width 0.5s;
  background-color: #373b41;
}
.icon-zhedie2 {
  font-size: 30px;
}
//控制折叠
.foldBtn_box {
  // background-color: #4a5064;
  width: 100%;
  text-align: right;
  line-height: 24px;
  cursor: pointer;
}
</style>
